<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Document, Location, } from "@element-plus/icons-vue";

const route = useRoute();
const navList = ref(
  [
    {
      title: "快速入门",
      menuIndex: 1,
      subNav: [
        { name: "/introduction/hello", navItem: "快速开始" },
        { name: "/introduction/map", navItem: "map地图" },
        { name: "/introduction/view", navItem: "view视图" }]
    },
    {
      title: "常用控件",
      menuIndex: 2,
      subNav: [
        { name: "/control/zoom", navItem: "导航控件" },
        { name: "/control/operate", navItem: "基础控件" },
        { name: "/control/layer", navItem: "图层控件" },
        { name: "/control/position", navItem: "位置控件" },
        { name: "/control/overview", navItem: "鹰眼控件" },
        { name: "/control/fullscreen", navItem: "全屏控件" },
        { name: "/control/measure", navItem: "测量控件" },
        { name: "/control/animation", navItem: "动画控件" },
        { name: "/control/scaleline", navItem: "比例尺" },
        { name: "/control/layersearch", navItem: "搜索控件" },
      ]
    }
    , {
    title: "各种数据",
    menuIndex: 3,
    subNav: [
      { name: "/layer/image", navItem: "影像图层" },
      { name: "/layer/tile", navItem: "瓦片图层" },
      { name: "/layer/vector1", navItem: "矢量图层1" },
      { name: "/layer/vector2", navItem: "矢量图层2" },
      { name: "/layer/vector/tile", navItem: "矢量瓦片图层" },
      { name: "/layer/debug", navItem: "瓦片网格" },
      /*{name: '/layer/bd', navItem: "百度地图"},*/
      { name: "/layer/gd", navItem: "高德地图" },
      { name: "/layer/tdt", navItem: "天地图" },
      { name: "/layer/gg", navItem: "谷歌地图" },
      { name: "/layer/bing", navItem: "Bing地图" },
      { name: "/layer/arcgis", navItem: "ArcGIS" },
      { name: "/layer/geojson", navItem: "Geojson" },
      { name: "/layer/topojson", navItem: "Topojson" },
      { name: "/layer/esrijson", navItem: "Esrijson" },
      { name: "/layer/wkt", navItem: "WKT" },
      { name: "/layer/wkb", navItem: "WKB" },
      { name: "/layer/xml", navItem: "XML" },
      { name: "/layer/kml", navItem: "KML" },
      { name: "/layer/gml", navItem: "GML" },
      { name: "/layer/gpx", navItem: "GPX" },
    ]
  },
    //   {
    //     title: '地图交互',
    //     subNav: [
    //       {name: '/map/interaction', navItem: "地图交互"},
    //       {name: '/map/draw', navItem: "图形绘制"},
    //       {name: '/map/select', navItem: "图形选中"},
    //       {name: '/map/modify', navItem: "图形编辑"},
    //       {name: '/map/snap', navItem: "鼠标捕捉"},
    //       {name: '/map/extent', navItem: "范围交互"},
    //       {name: '/map/pointer', navItem: "鼠标交互"},
    //       {name: '/map/translate', navItem: "要素平移"},
    //       {name: '/map/dragbox', navItem: "拖拽盒子"},
    //       {name: '/map/dragpan', navItem: "拖拽平移"},
    //       {name: '/map/dragdrop', navItem: "拖入数据"},
    //       {name: '/map/keyboardpan', navItem: "键盘平移"},
    //       {name: '/map/dragrotate', navItem: "拖拽旋转"},
    //       {name: '/map/dragzoom', navItem: "拖拽缩放"},
    //       {name: '/map/keyboardzoom', navItem: "键盘缩放"},
    //       {name: '/map/mousewheelzoom', navItem: "滚轮缩放"},
    //       {name: '/map/doubleclickzoom', navItem: "双击缩放"},
    //       {name: '/map/dragrotatezoom', navItem: "拖拽旋转缩放"},
    //     ]
    //   }, {
    //   title: 'OGC服务',
    //   subNav: [
    //     {name: '/ogc/wms', navItem: "wms"},
    //     {name: '/ogc/wcs', navItem: "wcs"},
    //     {name: '/ogc/wmts', navItem: "wmts"},
    //     {name: '/ogc/wfs', navItem: "wfs"},
    //   ]
    // }, {
    //   title: '过滤器', subNav: [
    //     {name: '/filter/bbox', navItem: "bbox过滤"},
    //     {name: '/filter/contains', navItem: "contains过滤"},
    //     {name: '/filter/intersects', navItem: "intersects过滤"},
    //     {name: '/filter/disjoint', navItem: "disjoint过滤"},
    //     {name: '/filter/dwithin', navItem: "dwithin过滤"},
    //     {name: '/filter/within', navItem: "within过滤"},
    //     {name: '/filter/between', navItem: "between过滤"},
    //     {name: '/filter/during', navItem: "during过滤"},
    //     {name: '/filter/equalTo', navItem: "equalTo过滤"},
    //     {name: '/filter/greaterThan', navItem: "greaterThan过滤"},
    //     {name: '/filter/isNull', navItem: "isNull过滤"},
    //     {name: '/filter/lessThan', navItem: "lessThan过滤"},
    //     {name: '/filter/like', navItem: "like过滤"},
    //     {name: '/filter/and', navItem: "and逻辑运算"},
    //     {name: '/filter/not', navItem: "not逻辑运算"},
    //     {name: '/filter/or', navItem: "or逻辑运算"},
    //   ]
    // }, {
    //   title: '样式配置', subNav: [
    //     {name: '/style/style', navItem: "style"},
    //     {name: '/style/geometry', navItem: "geometry"},
    //     {name: '/style/fill', navItem: "fill"},
    //     {name: '/style/icon', navItem: "icon"},
    //     {name: '/style/text', navItem: "text"},
    //     {name: '/style/circle', navItem: "circle"},
    //     {name: '/style/stroke', navItem: "stroke"},
    //     {name: '/style/regularShape', navItem: "regularShape"},
    //   ]
    // }, {
    //   title: '投影转换', subNav: [
    //     {name: '/proj/transform', navItem: "投影转换"},
    //     {name: '/proj/transform/method', navItem: "投影转换方法"},
    //   ]
    // },
    {
      title: "高级功能",
      menuIndex: 9,
      subNav: [
        { name: "/advance/picture", navItem: "地图标注" },
        { name: "/advance/popup", navItem: "气泡标注" },
        { name: "/advance/multi", navItem: "视图联动" },
        { name: "/advance/location", navItem: "地图导航" },
        { name: "/advance/heatMap", navItem: "热点地图" },
        { name: "/advance/sign", navItem: "军事标绘" },
      ]
    },
    {
      title: "canvas渲染",
      menuIndex: 10,
      subNav: [
        { name: "/canvas/layer", navItem: "canvas瓦片" },
        { name: "/canvas/geometry", navItem: "canvas渲染几何" },
        { name: "/canvas/points", navItem: "canvas渲染要素" },
        { name: "/canvas/image", navItem: "canvas渲染影像" }
      ]
    }, {
    title: "webgl渲染",
    menuIndex: 11,
    subNav: [
      { name: "/webgl/layer", navItem: "webgl瓦片" },
      { name: "/webgl/style", navItem: "webgl瓦片样式" },
      { name: "/webgl/points", navItem: "webgl点精灵" }
    ]
  },
    {
      title: "项目实战echart",
      menuIndex: 12,
      subNav: [
        { name: "/project/scatter", navItem: "散点图" },
        { name: "/project/migration", navItem: "迁徙图" },
        { name: "/project/air", navItem: "空气质量" },
      ]
    }, {
    title: "项目实战cesium",
    menuIndex: 13,
    subNav: [
      { name: "/project/cesium", navItem: "二三维联动" },
    ]
  }, {
    title: "项目实战wind",
    menuIndex: 14,
    subNav: [
      { name: "/project/wind", navItem: "全球风场" },
    ]
  },
    // {
    //   title: '项目实战geoserver',
    //   subNav: [
    //     {name: '/project/wms', navItem: "GeoServerWMS"},
    //     {name: '/project/wmts', navItem: "GeoServerWMTS"},
    //     {name: '/project/wfs', navItem: "GeoServerWFS"},
    //     {name: '/project/edit', navItem: "GeoServer在线编辑"},
    //   ]
    // }, {
    //   title: '项目实战turf',
    //   subNav: [
    //     {name: '/project/intersect', navItem: "相交分析"},
    //     {name: '/project/difference', navItem: "差异分析"},
    //     {name: '/project/union', navItem: "空间合并"},
    //     {name: '/project/buffer', navItem: "缓冲分析"},
    //     {name: '/project/dynamic', navItem: "动态缓冲"},
    //   ]
    // },
{
      title: '项目实战其他',
      menuIndex: 15,
      subNav: [
        {name: '/project/frontcover', navItem: "正向遮罩"},
        {name: '/project/backcover', navItem: "反向遮罩"},
        {name: '/project/track', navItem: "路径回放"},
        {name: '/project/export', navItem: "地图导出"},
        {name: '/project/pdf', navItem: "导出PDF"},
        {name: '/project/circle', navItem: "警告圈"},
        {name: '/project/kriging', navItem: "克里金"},
        {name: '/project/swipe', navItem: "卷帘地图"},
      ]
    }
  ]
);
const router = useRouter();
const handleSelect = (path) => {
  router.push(path);
};
</script>

<template>
  <div class="nav-container">
    <el-menu
      class="el-menu-vertical-demo"
      default-active="2"
    >
      <el-sub-menu v-for="item in navList" :index="item.menuIndex">
        <template #title>
          <el-icon>
            <location/>
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="nav in item.subNav" :index="nav.name" @click="handleSelect(nav.name)">
          <el-icon>
            <document/>
          </el-icon>
          <span>{{ nav.navItem }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  position: relative;
  height: 100% !important;
}

.nav-container {
  height: 100%;

  :deep(.el-menu) {
    height: 100%;
  }
}

[class*=" el-icon-arrow"] {
  font-size: 25px;
  color: white;
  opacity: 0.6;
}

ul >>> .el-menu--popup {
  background: #0a567b;
  min-width: 160px;
}
</style>